import { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'

interface IProps {
  children?: ReactNode
  value: number
  maxValue: number
  time?: number
}

const Progress: FC<IProps> = (props) => {
  const { value = 0, maxValue = 100 } = props
  const actionProgress = Math.floor((value / maxValue) * 100) + '%'
  return (
    <div
      className={
        'w-full h-[5px] rounded bg-base-plate group transition duration-300'
      }
    >
      <div
        className={
          'relative h-full rounded bg-primary-600 transition duration-100 '
        }
        style={{ width: actionProgress }}
      >
        {/*<div*/}
        {/*  className={*/}
        {/*    'invisible group-hover:visible h-[9px] w-[9px] rounded absolute right-0  bg-amber-300 transition duration-300'*/}
        {/*  }*/}
        {/*></div>*/}
      </div>
    </div>
  )
}

export default memo(Progress)
